<template>
  <div class="app-container">
    <div class="product-div">
      <div class="divTable">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div>
            <div class="big_title_style" style="font-size: 18px;">
              <span>基础信息</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="名称" prop="supplierName">
                  <el-input
                    v-model="form.supplierName"
                    placeholder="请输入供应商名称"
                    :disabled="form.isAuth == 1 ? true : false"
                    maxlength="15"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-tooltip content="发布后不能修改供应商名称" placement="top">
                  <i
                    class="el-icon-question"
                    style="margin-top: 10px; margin-left: 10px"
                  >
                  </i>
                </el-tooltip>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="品类">
                  <el-input
                    v-model="form.mainCategory"
                    placeholder="请输入主营品类"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="品牌">
                  <el-input
                    v-model="form.supplierBrand"
                    placeholder="请输入供应商品牌"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="LOGO">
              <imageUpload v-model="form.supplierLogUrl"/>
            </el-form-item>

            <el-row>
              <el-col :span="12">
                <el-form-item label="简介" prop="supplierRemark">
                  <el-input
                    v-model="form.supplierRemark"
                    type="textarea"
                    placeholder="请输入内容"
                    maxlength="200"
                    show-word-limit
                    :autosize="{ minRows: 2}"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="售后说明" prop="orderService">
                  <el-input
                    v-model="form.orderService"
                    type="textarea"
                    placeholder="请输入内容"
                    maxlength="200"
                    show-word-limit
                    :autosize="{ minRows: 2}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div>
            <div class="big_title_style" style="font-size: 18px;">
              <span>联系方式</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人" prop="contactPerson">
                  <el-input
                    v-model="form.contactPerson"
                    placeholder="请输入联系人"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号" prop="supplierPhone">
                  <el-input
                    v-model="form.supplierPhone"
                    placeholder="请输入入驻手机号"
                    maxlength="11"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="supplierEmail">
                  <el-input
                    v-model="form.supplierEmail"
                    placeholder="请输入入驻邮箱"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>
              <el-row>
              <el-col :span="12">
                <el-form-item label="地址" prop="region">
                  <el-cascader
                    style="margin-bottom: 20px; display: block; width: 100%"
                    ref="cascaderAddr"
                    v-model="form.region"
                    :options="options"
                    size="medium"
                  ></el-cascader>
                  <el-input
                    style="display: block; width: 100%"
                    v-model="form.supplierAddress"
                    placeholder="请输入详细地址"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>

          </div>

          <div>
            <div class="big_title_style" style="font-size: 18px;">
              <span>其他信息</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div>
            <el-form-item label="营业执照">
              <imageList :imageStr.sync="form.licenseImgUrl" size="3"/>
            </el-form-item>

            <el-form-item label="宣传图" prop="bannerImage">
              <imageList :imageStr.sync="form.bannerImage" size="3"/>
            </el-form-item>
          </div>
        </el-form>

        <div class="footer_btn">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import {
    listInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo,
    updateDataStatus,
    getSupplierList,
    updateIsAuth
  } from '@/api/supplier/info'

  import {getRegion} from '@/api/common/regin'
  import imageArray from '@/components/ImageUpload/imageArray'
  import imageList from '@/components/ImageUpload/imageList'
  import imageUpload from '@/components/ImageUpload'
  //验证手机号
  let checkPhone = (rule, value, callback) => {
    if (value == null || value == ''){
      callback()
    }
    let reg =
      /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/
    if (!reg.test(value)) {
      callback(new Error('手机号或电话输入错误'))
    } else {
      callback()
    }
  }
  //验证邮箱
  let checkMailbox = (rule, value, callback) => {
    if (value == null){
      callback()
    }
    let reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!reg.test(value)) {
      callback(new Error())
    } else {
      callback()
    }
  }
  export default {
    name: 'SupplierInfo',
    components: {
      imageList,
      imageUpload,
      imageArray
    },
    data() {
      return {
        //发布状态翻译
        showDataIsAuth: '',
        //查看详细省市区翻译
        regionName: '',
        //图片预览
        zIndex: 3000,
        //文本域自动调节
        autosize: true,
        //宣传图
        bannerImage: [],
        //营业执照
        licenseImgUrl: [],
        region: [],
        // 地区信息
        options: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 供应商资料表格数据
        infoList: [],
        // 弹出层标题
        title: '',
        //查看详细标题
        viewTitle: '',
        //选中数组的名字
        names: [],
        // 是否显示弹出层
        open: false,
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        // 状态字典
        dataStatusOptions: [],
        // 发布状态字典
        isAuthOptions: [],
        //供应商列表
        supplierUidOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          supplierName: null,
          supplierPhone: null,
          contactPerson: null,
          dataStatus: null,
          supplierUid: null,
          isAuth: null,
          createTime: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          supplierName: [
            {required: true, message: '供应商名称不能为空', trigger: 'blur'},
            { min: 1, max: 15, message: '供应商名称 1 到 15个字符之间', trigger: 'blur' }
          ],
          supplierBrand:[
            { min: 0, max: 15, message: '供应商品牌 1 到 15个字符之间', trigger: 'blur' }
          ],
          mainCategory: [
            {required: true, message: '主营品类不能为空', trigger: 'blur'},
            { min: 1, max: 15, message: '主营品类 1 到 15个字符之间', trigger: 'blur' }
          ],
          region: [{required: true, message: '地址不能为空', trigger: 'blur'}],

          licenseImgUrl: [
            {required: true, message: '营业执照不能为空', trigger: 'blur'}
          ],

          supplierLogUrl: [
            {required: true, message: '供应商logo图不能为空', trigger: 'blur'}
          ],
          servePhone: [
            {
              type: 'number',
              validator: checkPhone,
              message: '输入有效手机号或电话',
              trigger: ['blur', 'change']
            }
          ],
          supplierPhone: [
            {required: true, message: '入驻手机号不能为空', trigger: 'blur'},
            {
              type: 'number',
              validator: checkPhone,
              message: '输入有效手机号或电话',
              trigger: ['blur', 'change']
            }
          ],
          supplierAddress: [
            {required: true, message: '详细地址不能为空', trigger: 'blur'}
          ],
          contactPerson: [
            {required: true, message: '联系人不能为空', trigger: 'blur'},
            { min: 1, max: 15, message: '联系人名称 1 到 15个字符之间', trigger: 'blur' }
          ],
          contactPhone: [
            {required: true, message: '联系电话不能为空', trigger: 'blur'},
            {
              type: 'number',
              validator: checkPhone,
              message: '输入有效手机号或电话',
              trigger: ['blur', 'change']
            }
          ],
          supplierEmail:[
            {
              validator: checkMailbox,
              message: '输入有效的邮箱',
              trigger: ['blur', 'change']
            }
          ]
        }
      }
    },
    created() {
      this.getList()
      this.getDicts('sys_data_status').then((response) => {
        this.dataStatusOptions = response.data
      })
      this.getDicts('supplier_is_auth').then((response) => {
        this.isAuthOptions = response.data
      })
      getSupplierList().then((response) => {
        this.supplierUidOptions = response.data
      })
      //获取地区信息
      getRegion().then((response) => {
        this.options = response.data
      })
    },
    methods: {
      /** 查询供应商 */
      getList() {
        var supplierId =this.$route.params.supplierId;

        if (supplierId){
          getInfo(supplierId).then((response) => {
            this.form = response.data
            this.open = true
            this.title = '修改供应商资料'
            //获取地区信息
            getRegion().then((response) => {
              this.options = response.data
            })
          })
        }

      },
      // 状态字典翻译
      dataStatusFormat(row, column) {
        return this.selectDictLabel(this.dataStatusOptions, row.dataStatus)
      },
      // 发布状态字典翻译
      isAuthFormat(row, column) {
        return this.selectDictLabel(this.isAuthOptions, row.isAuth)
      },
      // 取消按钮
      cancel() {
        this.reset()
        this.colsePro()
      },
      // 表单重置
      reset() {
        this.form = {
          supplierUid: null,
          platformUid: null,
          supplierNo: null,
          mainCategory: null,
          supplierBrand: null,
          supplierName: null,
          supplierLogUrl: null,
          servePhone: null,
          supplierRemark: null,
          supplierEmail: null,
          supplierPhone: null,
          supplierProvince: null,
          supplierCity: null,
          supplierArea: null,
          supplierAddress: null,
          contactPerson: null,
          contactPhone: null,
          dataStatus: null,
          isAuth: null,
          applyUser: null,
          applyTime: null,
          licenseImgUrl: null,
          authTime: null,
          authUpdateUid: null,
          createUser: null,
          updateUser: null,
          updateTime: null,
          createTime: null,
          storeLng: null,
          storeLat: null,
          bannerImage: null,
          juli: null,
          auditRemark: null,
          orderService: null,
          dataSort: null,
          region: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.supplierUid)
        this.names = selection.map((item) => item.supplierName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
        //用于禁用删除
        if (this.multiple == false) {
          for (var i = 0; i < selection.length; i++) {
            var element = selection[i]
            if ('1' === element.dataStatus) {
              this.multiple = true
              break
            }
          }
        }
      },
      handCloseDetail() {
        this.viewOpen = false
        this.showData = []
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          let area = this.$refs['cascaderAddr'].getCheckedNodes()[0].path
          this.form.supplierProvince = area[0]
          this.form.supplierCity = area[1]
          this.form.supplierArea = area[2]
          if (valid) {
            if (this.form.supplierUid != null) {
              updateInfo(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addInfo(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
              })
            }
            this.cancel()
          }
        })
      },
      //取消
      colsePro() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/supplier/info",
        });
      }

    }
  }
</script>

<style scoped>
  /* .MmsUiBlockTitle___line___27lhp1-44-1 {
    display: inline-block;
    background: #407cff;
    width: 2px;
    height: 16px;
    margin-right: 8px;
  }

  .MmsUiBlockTitle___title___2C-H-1-44-1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  } */
  .footer_btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-div {
    background-color: #fff;
    position: relative;
    padding: 20px;
    border: 1px solid #EEE;
    border-radius: 10px;
    width: 1000px;
    margin: 30px auto;
  }
</style>
